<template>
  <div style="height: 100%; overflow: hidden;">
    <header class="app-header">
      <LoginForm class="login"></LoginForm>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="首页" name="first">
          <HomePage />
        </el-tab-pane>
        <el-tab-pane label="发布文章" name="second">
          <PostArticle />
        </el-tab-pane>
        <el-tab-pane label="个人中心" name="fourth">
          <PersonCenter />
        </el-tab-pane>
        <el-tab-pane label="管理中心" name="fifth">
          <SuperviseCenter />
        </el-tab-pane>
      </el-tabs>
    </header>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage } from 'element-plus'
import LoginForm from '@/components/LoginFrom.vue'
import SuperviseCenter from '@/components/SuperviseCenter.vue'
import PostArticle from '@/components/PostArticle.vue'
import HomePage from './components/HomePage.vue'
import PersonCenter from './components/PersonCenter.vue'
import { useUserStore } from '@/stores/use'
const userStore = useUserStore()
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext) => {
  if (!userStore.login) {
    ElMessage.error('请先登录')
    nextTick(() => {
      activeName.value = 'first'
    })
  }
  if (tab.props.name === 'first' || tab.props.name === 'fourth') {
    userStore.open = true
  }
}
</script>

<style>
.app-header {
  position: relative;
  padding: 20px;
  min-height: 100%;
  overflow: hidden;
  background-color: rgb(245, 245, 245);
}

.demo-tabs>.el-tabs__content {
  padding: 1rem;
  min-height: 100%;
  overflow: hidden;
}

.el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
}

.demo-tabs .el-tabs__item {
  margin-right: 2rem;
}

.el-tabs__content {
  min-height: 80vh;
}

.login {
  position: absolute;
  right: 3%;
  z-index: 10;
}
</style>
